<template>
  <div class="boxbox">

    <div class="boxone" v-for="(item, index) in props.arrMsg" :key="index">
      <div class="img">
        <img src="https://u.miaoshoucdn.com/avatar/003/64/27/003642720_mid.jpg" alt="" />
      </div>
      <div class="detail">
        <div class="nameone">
          <p>
            <b style="font-size: 0.36rem">{{ item.doctorname }}</b>
            {{ item.doctorstate }}
          </p>
          <span>东莞市第八人民医院(东莞... 妇科</span>
        </div>
        <div class="nametwo">
          <van-tag color="#e7f0ff" text-color="#1e6fff" size="large">图文咨询</van-tag>
          <van-tag color="#e4f7f2" text-color="#01b488" size="large">电话咨询</van-tag>
        </div>
        <van-text-ellipsis
          style="padding-right: 10px"
          rows="1.5"
          :content="item.doctordescword"
          expand-text="﹀"
          collapse-text="︿"
        />
        <div class="namefour">
          <ul>
            <li>
              好评率 <span class="namecolor">{{ item.doctorgood }}%</span>
              <span class="nameicon">|</span>锦旗<span class="namecolor">{{
                item.doctortime
              }}</span
              ><span class="nameicon">|</span>浏览人次<span class="namecolor">{{
                item.doctorbrowse
              }}</span>
            </li>
          </ul>
        </div>
        <div class="namefive">
          <span class="fiveone"
            >￥<b>{{ item.doctorprice }}</b> <span>起</span>
          </span>
          <span class="fivetwo" style="margin-right: 0.2rem"
            ><van-button
              style="height: 0.65rem; border-radius: 0.2rem; background: #1e6fff"
              type="primary"
              @click="clickBtn(item)"
              >问医生</van-button
            ></span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { useRouter } from "vue-router";
const props = defineProps({
  arrMsg: Array,
  kg: Boolean,
});
const router = useRouter();
const clickBtn = (item) => {
  console.log(item);
  router.push({path:`/wys`,
    query: item
  });
};
</script>

<style scoped lang="scss">
* {
  font-size: 0.3rem;
}

.boxbox {
  width: 95%;
  height: 1000px;
  margin-left: 2.5%;
}

.top {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  align-items: center;
  background-color: #fff;
  padding: 0 10px;

  .title {
    font-size: 0.35rem;
    font-weight: bolder;
  }

  .more {
    color: #999;
    font-size: 0.35rem;
  }
}

.boxone {
  float: left;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #d3d3d3;
  padding-bottom: 10px;
}

.img {
  float: left;
  width: 1.5rem;
  height: 100%;
  /* background: green; */
  text-align: center;

  img {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-top: 0.4rem;
  }
}

.detail {
  margin-top: 10px;
  float: left;
  width: calc(100% - 1.5rem);
  /* height: 4rem; */
  /* background: green; */
}

.nameone {
  height: 1rem;

  /* background: red; */
  p {
    height: 0.2rem;
  }
}

.nametwo {
  height: 0.5rem;

  /* background: red; */
  .van-tag {
    margin-right: 0.1rem;
    font-size: 0.25rem;
  }
}

.namethree {
  height: 0.7rem;
  width: 95%;
  /* background: rgb(168, 168, 248); */
  color: #666666;
  font-size: 0.25rem;
  overflow: hidden;
  position: relative;
}

.arrow-btn {
  width: 0.7rem;
  text-align: center;
  position: absolute;
  font-size: 0.3rem;
  background: linear-gradient(to right, rgb(243, 243, 243), rgb(255, 255, 255));
  top: 0.4rem;
  right: 0;
}

.namefour {
  height: 0.5rem;
  /* background: rgb(69, 172, 231); */

  li {
    color: #666666;
    line-height: 0.5rem;
    font-size: 0.25rem;
  }

  .namecolor {
    color: #ff6600;
    font-size: 0.25rem;
    margin: 0 0.01rem;
  }

  .nameicon {
    color: #e0e0e0;
    font-size: 0.2rem;
    margin: 0 0.2rem;
  }
}
.namefive {
  height: 1rem;
  /* background: rgb(64, 75, 138); */
  line-height: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .fiveone {
    font-size: 0.25rem;
    color: #ff6600;
    b {
      font-size: 0.4rem;
      font-weight: 900;
    }
    span {
      color: #d3d3d3;
      font-size: 0.25rem;
    }
  }
}
</style>
